<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id ="id">
		<span >{{param}}</span>
		<h1>{{functions()}}</h1>
		<h2 v-html="s"></h2>
		<h3>{{params}}</h3>
		<a v-bind:href="url">连接</a>

		<h3 v-on:click="t">点击事件</h3>

		<input type="" name="" v-model="param">
		<div v-if="see">你看的剑我</div>
		<div v-else>你看不见我</div>
		<div v-for='data in array'>
			{{data.name}}

			{{data.sex}}

		</div>
		{{arr.qty}}

		<h4>{{funcs()}}</h4>

		<input type="radio" value="radios" v-model='radio'>
		<input type="radio" value="radios2" v-model='radio'>
		<select v-model='selects'>
			<option value="">选择一个网站</option>
		    <option value="www.runoob.com">Runoob</option>
		    <option value="www.google.com">Google</option>
		</select>
		<div id="output">
      	选择的网站是: {{selects}}
  		</div>

  		  <p>多个复选框：</p>
		  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
		  <label for="runoob">Runoob</label>
		  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
		  <label for="google">Google</label>
		  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
		  <label for="taobao">taobao</label>
		  选择的网站是: {{checkedNames}}
		  <p>组件</p>
		  <vm :ms="checkedNames"></vm>
		  <p>组件1</p>


		  <div id="counter-event-example">
		  	<P>{{total}}</P>
		  	<button-counter v-on:increment="incrementTotal"></button-counter>
      		<button-counter v-on:increment="incrementTotal"></button-counter>
		  </div>


		  <p>路由</p>
		    <!-- 使用 router-link 组件来导航. -->
		    <!-- 通过传入 `to` 属性指定链接. -->
		    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
		  <!--   <router-link to="/foo">Go to Foo</router-link>
		    <router-link to="/bar">Go to Bar</router-link> -->
		    <!-- 路由出口 -->
			<!-- 路由匹配到的组件将渲染在这里 -->
			<!-- <router-view></router-view> -->



	</div>
</body>
</html>

<script src="./vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">


	// const Foo = { template: '<div>foo</div>' }
	// const Bar = { template: '<div>bar</div>' }
	// const routes = [
	//   { path: '/foo', component: Foo },
	//   { path: '/bar', component: Bar }
	// ]

	// const router = new VueRouter({
	//   routes // （缩写）相当于 routes: routes
	// })
	

	//组件自定义
	Vue.component('vm',{
		props: ['ms'],
		template: '<h1>{{ms.name}}</h1>'
	});

	Vue.component('button-counter', {
	  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
	  data:function(){
	     return {
	     	counter: 0
	     }
	  },
	  methods: {
	    incrementHandler: function () {
	      this.counter += 1
	      this.$emit('increment')
	      // this.$emit('increment')
	    }
	  },
	});

// 	const app = new Vue({
//   router
// }).$mount('#app')


	var vm = new Vue({
		el:"#id",
		data:{
			param:"11111",
			s:"haha",
			url:"www.baidu.com",
			see:true,
			array:[{"name":"haha","sex":'1'},{"name":"ss","sex":"2"},{"name":"hdhd","sex":"1"}],
			radio:"radios",
			selects:'',
			checkedNames:[],
			ms:{"name":"haha"},
			total:0,
			arr:{"name":"hahas"}
			// params:"测试"
		},
		methods:{
			functions:function(){
				return this.param;
			},
			t:function(){
				return this.param='改变';
			},
			funcs:function(){
				return this.param;
			},
			incrementTotal:function(){
				this.total+=1;
			}
			
		},
		computed:{
			params:function(){
				return 2222;
			},
			
		},
		watch:{
			param:function(){
				console.log(9,'改变了');
			}
		}

	})

	// vm.arr.qty = "1";
	//Vue.set(ms, 'qty', "ssssggggggggggggggggggggggs");
	//Vue.set(array,0,{qty:"1111"})
	// Vue.set(arr,sex,'1');
</script>
